<template>
	<div class="person">
		<h1>我是Person组件</h1>
		<h3>姓名：{{name}}</h3>
		<h3>年龄：{{age+1}}</h3>
		<h3>性别：{{sex}}</h3>
		<h3>爱好：</h3>
		<ul>
			<li v-for="(h,index) in hobby" :key="index">{{h}}</li>
		</ul>
		<!-- <h3>座驾：</h3>
		<ul>
			<li v-for="(v,k) in cars" :key="k">{{v}}</li>
		</ul> -->
	</div>
</template>

<script>
	export default {
		name:'Person',
		//第一种声明接收props，只是单纯的接收，不做任何校验
		// props:['name','sex','age','hobby','cars'],

		//第二种声明接收props，接收的同时做类型的校验
		/* props:{
			name:String, //接收父组件传递过来的name属性，且要求必须是字符串
			age:Number,
			sex:String,
			hobby:Array,
			cars:Object
		} */

		//第三种声明接收props，接收的同时：做类型的校验、指定默认值、配置必要性
		props:{
			name:{
				type:String, //控制name的类型
				default:'张三', //指定默认值（在父组件没有传递name属性时生效）
				required:true //是否必须传
			},
			sex:{
				type:String,
				default:'不男不女',
				required:true,
			},
			age:{
				type:Number,
				default:100,
				required:true,
			},
			hobby:{
				type:Array,
				default(){
					return ['学习','打台球','看电影']
				},
				required:true,
			},
			cars:{
				type:Object,
				default(){
					return {
						c1:'玛莎拉蒂',
						c2:'捷达'
					}
				},
				required:true,
			}
		}
	}
</script>

<style scoped>
	.person{
		background-color: skyblue;
		padding: 20px;
	}
</style>